<template>
    <div class="top">
        <div class="left">
            <el-icon :size="16">
                <Search />
            </el-icon>
            <span>筛选搜索</span>
            <div class="inputspan">
                <p>输入搜索:</p>
                <el-input v-model="name" type="text" label="活动名称：" placeholder="品牌名称/关键字"></el-input>
            </div>
        </div>
        <div class="right">
            <el-button type="primary" @click="onSearch">查询搜索</el-button>
        </div>
    </div>
    <div class="center">
        <div class="left">
            <el-icon>
            </el-icon>
            <span>数据列表</span>
        </div>
        <div class="right">
            <el-button type="primary" @click="add">选择专题</el-button>
        </div>
    </div>
    <div class="bottom">
        <el-table :data="tableData" style="width: 100%" :border="true">
            <el-table-column type="selection" width="60" />
            <el-table-column prop="id" style="text-align: center;" label="编号" width="80">
            </el-table-column>
            <el-table-column prop="subjectName" style="text-align: center;" label="专题名称" width="240">
            </el-table-column>
            <el-table-column label="是否推荐" width="240">
                <template #default="scope">
                    <el-switch :value="scope.row.recommendStatus === 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="240">
            </el-table-column>
            <el-table-column label="状态" width="169">
                <template #default="scope">
                    <div>{{ scope.row.recommendStatus === 1 ? '推荐' : '未推荐' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160" flex="right">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="sort(scope.row)">设置排序</el-button>
                    <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
            :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 点了设置排序出现的对话框 -->
    <Edit1 :visible="visible1" @cancel="onCloseDialog" @sure="onConfirmDialog" :form="modalForm" />
    <!-- 点了选择专题出现的对话框 -->
    <Edit2 :visible="visible2" @cancel="oncancel" @sure="onsure" />
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import * as api from '../../json/request/api'
import useTable from "../../hooks/useTables";
import type { Ref } from 'vue';
import Edit1 from './Edit/Edit1.vue'
import Edit2 from './Edit/Edit2.vue'
import { ElMessage, ElMessageBox } from "element-plus";
import type { TjRes, Sort } from "../../json/request/QmsAdminConreiller/index";
let name = ref("");
let modalForm = ref({}) as Ref<TjRes>
let {
    tableData,
    getTableData,
    pagination,
    handleSizeChange,
    handleCurrentChange,
} = useTable(api.admin.TjList, {
    subjectName: name, // name 是响应式的
});
onMounted(() => {
    // let data = ref(tableData)
    // console.log(data.value);
})


// if (tableData.value.recommendStatus) {

// }
// 弹框
let visible1 = ref(false)
let visible2 = ref(false)
getTableData()
// 设置排序
let sort = (row: any) => {
    console.log(row);
    modalForm.value = row;
    visible1.value = true;
}

// 子级emit组件传过来的事件
let onCloseDialog = () => {
    visible1.value = false;
};
let onConfirmDialog = (row: Sort) => {
    // console.log(row);  // row就是表单数据
    // 二次 确认
    ElMessageBox.confirm("是否确认提交!", "提示", {
        confirmButtonText: "OK",
        cancelButtonText: "取消",
        type: "warning",
    })

};
// 添加
let add = () => {
    visible2.value = true
}
// 搜索
let onSearch = async () => {
    getTableData()
}
// 删除
let del = (row: any) => {
    ElMessageBox.confirm("是否确认删除!", "提示", {
        confirmButtonText: "OK",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            await api.admin.delTj(row.id)
            location.reload()
        })

}
let oncancel = () => {
    visible2.value = false
}
let onsure = () => {
    visible2.value = false
}
</script>

<style scoped lang="scss">
.top {
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    padding: 20px;

    .left {
        .el-icon {
            transform: translateY(2px);
        }

        .inputspan {
            display: flex;
            margin-top: 30px;
            transform: translateX(45px);

            p {
                font-size: 14px;
                width: 80px;
                transform: translateY(10px);
                color: #606266;
            }

            .el-input {
                transform: translateX(30px);
                margin-bottom: 20px;
            }
        }
    }
}

.center {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    padding: 20px;
    align-items: center;
}
</style>